<template>
  <div class="drug-landing-statistics">
    <div class="search">
      <el-form :inline="true" label-position="right" :model="formData" ref="validateForm">
        <div class="line">
          <el-form-item label="时间">
            <el-date-picker
              name="pub-time"
              v-model="formData.time"
              type="month"
              value-format="yyyy-MM"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="统筹区">
            <el-select
              v-model="formData.region"
              placeholder="请选择险种"
              clearable
            >
              <el-option
                v-for="item in regions"
                :key="item.dictCode"
                :label="item.dictValue"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="confirm-reset">
            <el-button class="reset" @click="resetClick">重置</el-button>
            <el-button type="primary" class="confirm" @click="searchClick">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="table-list">
      <div class="title-content">
        <div class="title">谈判药品落地情况监测统计</div>
        <el-button type="primary" class="export" @click="exportClick">导出</el-button>
      </div>
      <div class="table-content">
        <el-table :data="tableData" border style="width: 100%;"
        v-loading="loading"
        max-height="550"
        >
          <el-table-column
            type="index"
            label="序号"
            width="50"
            fixed
            align="center">
          </el-table-column>
          <el-table-column
            prop="drugName"
            label="药品名称"
            width="180"
            fixed
            align="center">
          </el-table-column>
          <el-table-column
            prop="dosageForm"
            label="剂型"
            width="180"
            fixed
            align="center">
          </el-table-column>
          <el-table-column label="报销方式" align="center">
            <el-table-column
              prop="MendeCatalog"
              label="是否纳入门慢、门特疾病范围或药品目录①（是/否）"
              width="200"
              align="center"
              >
              <template slot="header">
                <Tips :tips="tip1"></Tips>
              </template>
            </el-table-column>
            <el-table-column
              prop="twoChannelDrug"
              label="是否纳入双通道药品目录②（是/否）"
              width="150"
              align="center">
              <template slot="header">
                <Tips :tips="tip2"></Tips>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="online"
            label="是否已直接挂网③（是/否）"
            width="150"
            align="center">
            <template slot="header">
              <Tips :tips="tip3"></Tips>
            </template>
          </el-table-column>
          <el-table-column label="若有仿制药上市④" align="center">
            <template slot="header">
              <Tips :tips="tip4"></Tips>
            </template>
            <el-table-column
              prop="manufacturersCount"
              label="1-1仿制药直接挂网厂商数量（个）"
              width="150"
              align="center">
            </el-table-column>
            <el-table-column
              prop="unlineReason"
              :label="'1-2未挂网原因\n（1、企业未申请；2、医保审核未通过；3、其他，请详细说明）'"
              width="430"
              align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column label="该药品医保报销人次⑤（若无双通道，则只需填写2-1）" align="center">
            <template slot="header">
              <Tips :tips="tip5"></Tips>
            </template>
            <el-table-column
              prop="medicalCount"
              label="2-1医疗机构报销人次"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="twoChannelCount"
              label="2-2双通道药店报销人次"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="medicalNum"
              label="2-3医疗机构报销人数"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="twoChannelNum"
              label="2-4双通道药店报销人数"
              width="180"
              align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column label="该药品医保报销金额（元）⑥（若无双通道，则只需填写3-1）" align="center">
            <template slot="header">
              <Tips :tips="tip6"></Tips>
            </template>
            <el-table-column
              prop="medicalAmount"
              label="3-1医疗机构报销金额"
              width="210"
              align="center">
            </el-table-column>
            <el-table-column
              prop="twoChannelAmount"
              label="3-2双通道药店报销金额"
              width="210"
              align="center">
            </el-table-column>
          </el-table-column>
          <el-table-column label="该药品总费用（元）⑦（若无双通道，则只需填写4-1）" align="center">
            <template slot="header">
              <Tips :tips="tip7"></Tips>
            </template>
            <el-table-column
              prop="medicalTotalCost"
              label="4-1医疗机构销售药品总费用"
              width="200"
              align="center">
            </el-table-column>
            <el-table-column
              prop="twoChannelTotalCost"
              label="4-2双通道药店销售总费用"
              width="200"
              align="center">
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalDataCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </pagination>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import Tips from "./Tips.vue";
// import { 
//   treatmentServDict, 
//   treatmentServList 
//   } from "@/api/index.js"
export default {
  components: {
    Pagination,
    Tips,
  },
  data() {
    const last = this.getLastMonth();
    return {
      formData: {
        time: this.getLastMonth(), //过去三年，单月选择；默认上个月
        region: "1",
      },
      pickerOptions: { //过去三年 截止上月 本月不可选
        disabledDate(time) {
          const nl = new Date(last);
          return time.getTime() > nl || time.getTime() < Date.now()-3*356*24*3600*1000;
        },
      },
      currentPage: 1,
      pageSize: 10,
      loading: false,
      pageIndex: 0,
      regions: [
        {
          dictCode: "1",
          dictValue: "全部",
        },
        {
          dictCode: "2",
          dictValue: "朝阳区",
        },
        {
          dictCode: "3",
          dictValue: "海淀区",
        },
      ],
      tip1: {
        title:"是否纳入门慢、门特疾病范围或药品目录",
        ind:"①",
        sel:"（是/否）",
        content: "门慢、门特疾病保障机制是指部分地区根据经济发展水平和基金承受能力，将一些病期长、医疗费用高的慢特病门诊医疗费用纳入统筹基金支付范围。若本省（区、市）建立了门慢、门特疾病保障机制且制定了覆盖门诊慢特病的药品目录，则本项是指统计周期内该药品是否纳入门慢、门特药品目录。若纳入，则填“是”，否则填“否”。若本省（区、市）仅制定门慢、门特疾病病种保障机制未制定专门的药品目录，则本项是指统计周期内该药品限定支付范围内适应症是否纳入门慢、门特疾病病种保障目录并由统筹基金予以支付。若纳入，则填“是”，否则填“否”。"
      },
      tip2: {
        title:"是否纳入双通道药品目录",
        ind:"②",
        sel:"（是/否）",
        content: "双通道药品供应保障机制是指患者可通过定点医疗机构渠道或定点药店购买国家谈判药品，并享受同样的报销待遇。若本省（区、市）建立了双通道药品供应保障机制，且制定了双通道药品目录，则本项是指统计周期内该药品是否纳入双通道药品目录，若纳入，则填“是”，且应在2-1、2-2、3-1、3-2、4-1和4-2部分填写相应的数据。若未纳入，则填“否”，仅在2-1、3-1和4-1部分填写数据即可。"
      },
      tip3: {
        title:"是否已直接挂网",
        ind:"③",
        sel:"（是/否）",
        content: "是指协议期间谈判药品在本省（区、市）省级招采平台直接挂网采购的情况，若已挂网则填“是”，若未挂网则填“否”。"
      },
      tip4: {
        title:"若有仿制药上市",
        ind:"④",
        sel:"",
        content: "针对协议期间已有仿制药上市的品种填写。若统计周期内有仿制药挂网，则需在1-1处填写在本省（区、市）直接挂网的该仿制药厂家数，若统计周期内已有仿制药上市但未直接挂网，需在1-2处选择未挂网具体原因，如选择其他需详细说明具体原因。"
      },
      tip5: {
        title:"该药品医保报销人次",
        ind:"⑤",
        sel:"（若无双通道，则只需填写2-1）",
        content: "指统计周期内，该药品（含仿制药）每月在全省的医保报销人次数，单位为人次。若本省（区、市）执行双通道政策，则需分别统计2-1医疗机构报销人次（含门诊和住院）和2-2药店报销人次。"
      },
      tip6: {
        title:"该药品医保报销金额（元）",
        ind:"⑥",
        sel:"（若无双通道，则只需填写3-1）",
        content: "指统计周期内，该药品（含仿制药）由医保报销的总金额，单位为元。若本省（区、市）执行双通道政策，则需分别统计3-1医疗机构报销金额（含门诊和住院）和3-2药店报销金额。"
      },
      tip7: {
        title:"该药品总费用（元）",
        ind:"⑦",
        sel:"（若无双通道，则只需填写4-1）",
        content: "指统计周期内，该药品（含仿制药）发生的药品总费用，单位为元。若本省（区、市）执行双通道政策，则需分别统计4-1医疗机构药品总费用（含门诊和住院）和4-2药店药品总费用。"
      },
      tableData:[
        {
          drugName:"药品名称", 
          dosageForm:"剂型", 
          MendeCatalog:"是或否", 
          twoChannelDrug:"是或否", 
          online:"是或否", 
          medicalCount:"1234", 
          manufacturersCount: "10个",
          unlineReason:"未挂网原因", 
          reimbursementCount:"1次", 
          twoChannelCount:"1次", 
          medicalNum:"23", 
          twoChannelNum:"11", 
          medicalAmount:"2222.12",
          twoChannelAmount:"2222.12", 
          medicalTotalCost:"1111.45",
          twoChannelTotalCost:"3333.12", 
        },
        {
          drugName:"药品名称", 
          dosageForm:"剂型", 
          MendeCatalog:"是或否", 
          twoChannelDrug:"是或否", 
          online:"是或否", 
          medicalCount:"1234", 
          manufacturersCount: "10个",
          unlineReason:"未挂网原因", 
          reimbursementCount:"1次", 
          twoChannelCount:"1次", 
          medicalNum:"23", 
          twoChannelNum:"11", 
          medicalAmount:"2222.12",
          twoChannelAmount:"2222.12", 
          medicalTotalCost:"1111.45",
          twoChannelTotalCost:"3333.12", 
        }
      ],
      totalDataCount: 71,
    };
  },
  mounted() {
    this.searchClick();
  },
  methods: {
    //获取上个月，例如2021-09
    getLastMonth() {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth();
      if(month == 0) {
        return year -1 + "-" + 12;
      } else if(month.toString().length == 1) {
        return year + "-0" + month;
      } else {
        return year +"-" + month;
      }
    },
    // 重置
    resetClick() {
      this.formData= {
        time: this.getLastMonth(),
        region: "1",
      }
    },
    //点击查询
    searchClick() {
      this.currentPage = 1;
      this.searchData = JSON.parse(JSON.stringify(this.formData))
      this.searchList();
    },
    //发送查询请求
    searchList() {
      this.loading = true; //加载中。。。
      const params = {
        ...this.searchData,
        pagenum: this.currentPage,
        pagecount: this.pageSize,
      }
      console.log("111111",params);
      this.loading = false;
      // treatmentServList(params).then(res=>{
      //   // console.log("ssssssssssssssss",res);
      //   this.tableData = res.data;
      //   this.loading = false;
      // }).catch(err=>{
      //   console.log(err);
      // })
    },
    // 页码-每页**条
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.searchList();
    },
    // 页码-当前**页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.searchList();
    },
    //导出
    exportClick() {
      console.log("导出。。。。。");
    },
  }
};
</script>

<style lang="less" scoped>
@import url("@/assets/common/global_deep_style.less");
@import url("./index.less");

</style>